<template>
  <div class="contain-view">
    <a-divider/>
    <div v-if="!isEditing">
      <div class="flext-row-start" >
        <div>
          名称:{{name}}
        </div>
        <div class="edit-icon" @click="isEditing = true">
          <edit-outlined />
        </div>
      </div>
      <div class="flext-row-start">
        type:{{type}}
      </div>
    </div>
    <menu-item v-if="isEditing" @editCompleted="editCompleted"/>
    <a-divider />
  </div>
</template>

<script>
import menuItem from "@/views/sys/wx/menuItem";
import {EditOutlined} from "@ant-design/icons-vue"
export default {
name: "menupart",
  components:{
    menuItem,
    EditOutlined
  },
  data(){
    return {
      name:"",
      type:"",
      isEditing:false,//是否在编辑
    }
  },
  methods:{
    onEditClick(){

    },
    editCompleted(){
      this.isEditing = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.contain-view{
  width: 100%;
}
  .edit-icon{
    margin-left:35px;
  }

</style>